<template>
    <div class="home">
        <el-card
            shadow="never animate__animated animate__fadeInUp animate__faster"
        >
            <div class="title-top onflex">
                <h2>经营概况</h2>
            </div>
            <el-row :gutter="20" class="data-card">
                <el-col :span="8">
                    <div class="money-today">
                        <i class="ri-money-cny-circle-fill"></i>
                        <el-row>
                            <!-- <el-col :span="14"
                                ><p>{{ mTodayClass }}</p></el-col
                            > -->
                            <el-col :span="24"
                                ><p>{{ mTodayShop }}</p></el-col
                            >
                        </el-row>
                        <el-row>
                            <!-- <el-col :span="14"><p>今日应收（课程）</p></el-col> -->
                            <el-col :span="24"><p>今日应收（商城）</p></el-col>
                        </el-row>

                        <el-row>
                            <!-- <el-col :span="14"
                                ><p>昨日应收 {{ mYesterClass }}</p></el-col
                            > -->
                            <el-col :span="24"
                                ><p>昨日应收 {{ mYesterShop }}</p></el-col
                            >
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="8"
                    ><div class="new-member">
                        <i class="ri-parent-fill"></i>
                        <el-row>
                            <el-col :span="14"
                                ><p>{{ nTodayMember }}</p></el-col
                            >
                            <el-col :span="10"
                                ><p>{{ cumMember }}</p></el-col
                            >
                        </el-row>
                        <el-row>
                            <el-col :span="14"><p>今日新增会员</p></el-col>
                            <el-col :span="10"><p>累计会员</p></el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24"
                                ><p>昨日新增会员 {{ nYesterMember }}</p></el-col
                            >
                        </el-row>
                    </div></el-col
                >
                <el-col :span="8"
                    ><div class="class-today">
                        <i class="ri-star-smile-fill"></i>
                        <el-row>
                            <el-col :span="24"
                                ><p>{{ cToday }}</p></el-col
                            >
                        </el-row>
                        <el-row>
                            <el-col :span="24"><p>今日上课</p></el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24"
                                ><p>昨日上课 {{ cYester }}</p></el-col
                            >
                        </el-row>
                    </div></el-col
                >
            </el-row>
        </el-card>
        <div
            class="
                home-tab-full
                animate__animated animate__fadeInUp animate__delay-0.5s
            "
        >
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card shadow="never">
                        <div class="home-tab">
                            <div class="home-tab-class">
                                <el-tabs v-model="tabLeftName">
                                    <el-tab-pane label="今日团课" name="l-1">
                                        <el-timeline class="text-l">
                                            <el-timeline-item
                                                v-for="(
                                                    activity, index
                                                ) in groupClass"
                                                :key="index"
                                                :timestamp="activity.time"
                                                type="primary"
                                                size="large"
                                            >
                                                {{ activity.coachName }}
                                            </el-timeline-item>
                                        </el-timeline>
                                    </el-tab-pane>
                                    <!-- <el-tab-pane label="今日私教" name="l-2">
                                        <el-timeline class="text-l">
                                            <el-timeline-item
                                                v-for="(
                                                    activity, index
                                                ) in myClass"
                                                :key="index"
                                                :timestamp="activity.timestamp"
                                                type="primary"
                                                size="large"
                                            >
                                                {{ activity.content }}
                                            </el-timeline-item>
                                        </el-timeline>
                                    </el-tab-pane> -->
                                </el-tabs>
                                <div class="button-more">
                                    <el-link type="primary" @click="toRecord"
                                        >更多</el-link
                                    >
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="never">
                        <div class="home-tab">
                            <div class="home-tab-card">
                                <el-tabs v-model="tabRightName">
                                    <el-tab-pane label="最新办卡" name="r-1">
                                        <div
                                            class="newest-vip text-l"
                                            v-for="(newVip, index) in newCard"
                                            :key="index"
                                        >
                                            <el-row>
                                                <el-col :span="3">
                                                    <el-avatar
                                                        :size="60"
                                                        :src="newVip.avatar"
                                                    ></el-avatar>
                                                </el-col>
                                                <el-col :span="21">
                                                    <el-row>
                                                        <el-col :span="12">
                                                            <p class="contvip1">
                                                                {{
                                                                    newVip.name
                                                                }}
                                                            </p>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <p class="contvip2">
                                                                {{
                                                                    newVip.type
                                                                }}
                                                            </p>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row>
                                                        <el-col :span="12">
                                                            <p class="contvip3">
                                                                {{
                                                                    newVip.balance
                                                                }}
                                                                次
                                                            </p>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <p class="contvip4">
                                                                {{
                                                                    newVip.createTime
                                                                }}
                                                            </p>
                                                        </el-col>
                                                    </el-row>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                                <div class="button-more">
                                    <!-- <router-link tag="el-link" to="/memberc/membercard"></router-link> -->
                                    <el-link type="primary" @click="toVipCard"
                                        >更多</el-link
                                    >
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div
            class="
                mall-statistics
                animate__animated animate__fadeInUp animate__delay-0.5s
            "
        >
            <el-card shadow="never">
                <div class="mall-statistics-h text-l">
                    <h4>商城销售统计</h4>
                </div>
                <div class="mall-chart-tab onflex">
                    <h5>近一周销售记录</h5>

                    <el-radio-group v-model="chartTab" @change="dateSel">
                        <el-radio-button label="今日"></el-radio-button>
                        <el-radio-button label="本周"></el-radio-button>
                        <el-radio-button label="本月"></el-radio-button>
                    </el-radio-group>
                    <div class="date-picker">
                        <el-date-picker
                            v-model="cuDate"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            @change="cusDate1"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                        >
                        </el-date-picker>
                    </div>
                </div>
                <div class="mall-statistics-chart" id="mallChart"></div>
            </el-card>
        </div>

        <!-- <div class="mall-statistics">
            <el-card shadow="never">
                <div class="class-statistics-h text-l">
                    <h4>课程销售统计</h4>
                </div>
                <div class="class-chart-tab onflex">
                    <h5>近一周销售记录</h5>

                    <el-radio-group v-model="chartTab2" @change="dateSel2">
                        <el-radio-button label="今日"></el-radio-button>
                        <el-radio-button label="本周"></el-radio-button>
                        <el-radio-button label="本月"></el-radio-button>
                    </el-radio-group>
                    <div class="date-picker">
                        <el-date-picker
                            v-model="cuDate2"
                            value-format="yyyy-MM-dd"
                            @change="cusDate2"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                        >
                        </el-date-picker>
                    </div>
                </div>
                <div class="class-statistics-chart" id="classChart"></div>
            </el-card>
        </div> -->
    </div>
</template>

<style lang="less" scoped>
.text-l {
    text-align: left;
}
.title-top {
    line-height: 50px;
    border-bottom: 1px solid #00000020;
    padding-bottom: 15px;
}
.money-today,
.new-member,
.class-today {
    height: 120px;
    padding: 20px;
    border-radius: 5px;
    .el-row:nth-child(2) {
        font-weight: bold;
        line-height: 60px;
        font-size: 50px;
    }
    .el-row:nth-child(4) {
        line-height: 30px;
        font-size: 18px;
    }
}
.money-today {
    position: relative;
    overflow: hidden;
    background-color: #f56954;
    i {
        font-size: 100px;
        color: rgba(0, 0, 0, 0.1);
        position: absolute;
        right: 0px;
        bottom: 20px;
    }
}
.new-member {
    position: relative;
    overflow: hidden;
    background-color: #2096f3;
    i {
        font-size: 100px;
        color: rgba(0, 0, 0, 0.1);
        position: absolute;
        right: 0px;
        bottom: 20px;
    }
}
.class-today {
    position: relative;
    overflow: hidden;
    background-color: #00a65a;
    i {
        font-size: 100px;
        color: rgba(0, 0, 0, 0.1);
        position: absolute;
        right: 0px;
        bottom: 20px;
    }
}
.data-card {
    margin-top: 20px;
    text-align: left;
    color: #ffffff;
    font-size: 20px;
    line-height: 30px;
}

.el-tabs__item {
    font-size: 50px !important;
}
.home-tab-full {
    margin-top: 20px;
}
.home-tab-class {
    position: relative;
    .button-more {
        position: absolute;
        right: 0;
        top: 10px;
    }
}
.home-tab-card {
    position: relative;
    .button-more {
        position: absolute;
        right: 0;
        top: 10px;
    }
}
.el-timeline {
    margin-left: 5px;
}
.newest-vip {
    padding: 5px;
    height: 70px;
}
.contvip1 {
    line-height: 35px;
    font-size: 20px;
}
.contvip2 {
    line-height: 35px;
    text-align: right;
    font-size: 20px;
}
.contvip3 {
    font-size: 15px;
}
.contvip4 {
    text-align: right;
    font-size: 15px;
}
.mall-statistics {
    margin-top: 20px;
    h4 {
        line-height: 25px;
    }
}
.mall-statistics-chart {
    height: 500px;
}
.mall-chart-tab {
    margin-top: 20px;
    margin-left: 10%;
    justify-content: space-between;
    align-content: center;
}
.class-statistics-chart {
    height: 500px;
}
.class-chart-tab {
    margin-top: 20px;
    margin-left: 10%;
    justify-content: space-between;
    align-content: center;
}
</style>

<script>
import * as echarts from "echarts";
import qs from "qs";
import moment from "moment";
moment.locale("zh-cn");
export default {
    data() {
        return {
            mTodayClass: 1000, //今日应收（课程）
            mTodayShop: 0, //今日应收（商城）
            mYesterClass: 500, //昨日应收（课程）
            mYesterShop: 0, //昨日应收（商城）
            nTodayMember: 0, //今日新增会员
            cumMember: 0, //累计会员
            nYesterMember: 0, //昨日新增会员
            cToday: 0, //今日上课
            cYester: 0, //昨日上课
            tabLeftName: "l-1", //左TAB
            tabRightName: "r-1", //右TAB

            //今日团课时间线
            groupClass: [
                {
                    content: "教练1",
                    timestamp: "课程1 20:46",
                },
                {
                    content: "教练2",
                    timestamp: "课程3 20:46",
                },
                {
                    content: "教练3",
                    timestamp: "课程3 20:46",
                },
                {
                    content: "教练4",
                    timestamp: "课程4 20:46",
                },
            ],
            //今日私教时间线
            myClass: [
                {
                    content: "私练1",
                    timestamp: "课程1 20:46",
                },
                {
                    content: "私练2",
                    timestamp: "课程3 20:46",
                },
                {
                    content: "私练3",
                    timestamp: "课程3 20:46",
                },
                {
                    content: "私练4",
                    timestamp: "课程4 20:46",
                },
            ],
            //最新办卡
            newCard: [],
            //日期选择1
            dateTime: [
                {
                    //今日
                    hourStart: "",
                    hourEnd: "",
                    //本周
                    weekStaet: "",
                    weekEnd: "",
                    //本月
                    monthStaet: "",
                    monthEnd: "",
                },
            ],
            //日期选择2
            dateTime2: [
                {
                    //今日
                    hourStart2: "",
                    hourEnd2: "",
                    //本周
                    weekStaet2: "",
                    weekEnd2: "",
                    //本月
                    monthStaet2: "",
                    monthEnd2: "",
                },
            ],
            //自定义日期选择
            cuDate: "",
            cuDate2: "",
            //图表1
            mallChartData: {
                date: [],
                value: [],
            },
            //图表1
            // classChartData: {
            //     date: [],
            //     value: [],
            // },
            dateValue: "",
            chartTab: "本周",
            dateValue2: "",
            chartTab2: "本周",

            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now(); //今天之后禁用
                },
            },
        };
    },
    methods: {
        dateSel(value) {
            // console.log(value);
            this.mallChartData.date = [];
            this.mallChartData.value = [];
            switch (value) {
                case "今日":
                    // this.hourStart = "00:00";
                    // this.hourEnd = moment().format("HH:mm");

                    this.hourStart = moment().format("YYYY-MM-DD");

                    this.$axios({
                        url: "/gym/mallOrder/findMallOrderTotalToday",
                        method: "post",
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded",
                        },
                        data: qs.stringify({
                            startTime: this.hourStart,
                            endTime: moment(this.hourStart)
                                .add(1, "days")
                                .format("YYYY-MM-DD"),
                        }),
                    }).then((res) => {
                        console.log(res.data.data);
                        for (let i = 0; i < res.data.data.length; i++) {
                            this.mallChartData.date.push(
                                moment(res.data.data[i].create_time).format(
                                    "HH:mm"
                                )
                            );
                            this.mallChartData.value.push(
                                res.data.data[i].total
                            );
                        }
                        this.mallChart();
                        console.log("今日时间", this.mallChartData.date);
                        console.log("今日数据", this.mallChartData.value);
                    });

                    console.log(this.hourStart);
                    // console.log(this.hourStart, this.hourEnd);
                    break;
                case "本周":
                    this.weekStaet = moment()
                        .startOf("week")
                        .format("YYYY-MM-DD");
                    this.weekEnd = moment().format("YYYY-MM-DD");
                    let weekDays = moment().diff(
                        moment().startOf("week"),
                        "days"
                    );
                    for (let i = 0; i < weekDays + 1; i++) {
                        this.mallChartData.date.push(
                            moment()
                                .startOf("week")
                                .add(i, "days")
                                .format("MM-DD")
                        );
                    }

                    this.$axios({
                        url: "/gym/mallOrder/findMallOrderTotalWeek",
                        method: "post",
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded",
                        },
                        data: qs.stringify({
                            startTime: this.weekStaet,
                            endTime: this.weekEnd,
                        }),
                    }).then((res) => {
                        // console.log(res);
                        for (let i = 0; i < weekDays + 1; i++) {
                            this.mallChartData.value.push(
                                res.data.data[i].count
                            );
                        }
                        this.mallChart();
                        console.log("本周时间", this.mallChartData.date);
                        console.log("本周数据", this.mallChartData.value);
                    });

                    this.mallChart();
                    // console.log(this.weekStaet, this.weekEnd);
                    break;
                case "本月":
                    this.monthStaet = moment()
                        .startOf("month")
                        .format("YYYY-MM-DD");
                    this.monthEnd = moment().format("YYYY-MM-DD");
                    let monthDays = moment().diff(
                        moment().startOf("month"),
                        "days"
                    );
                    for (let i = 0; i < monthDays + 1; i++) {
                        this.mallChartData.date.push(
                            moment()
                                .startOf("month")
                                .add(i, "days")
                                .format("MM-DD")
                        );
                    }

                    this.$axios({
                        url: "/gym/mallOrder/findMallOrderTotalMonth",
                        method: "post",
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded",
                        },
                        data: qs.stringify({
                            startTime: this.monthStaet,
                            endTime: this.monthEnd,
                        }),
                    }).then((res) => {
                        console.log(res);
                        for (let i = 0; i < monthDays + 1; i++) {
                            this.mallChartData.value.push(
                                res.data.data[i].count
                            );
                        }
                        this.mallChart();
                        console.log("本月时间", this.mallChartData.date);
                        console.log("本月数据", this.mallChartData.value);
                    });

                    // console.log(this.mallChartData.date);
                    // console.log(this.monthStaet, this.monthEnd,days);
                    break;
                default:
                    break;
            }
        },

        // dateSel2(value) {
        //     // console.log(value);
        //     this.classChartData.date = [];
        //     this.classChartData.value = [];
        //     switch (value) {
        //         case "今日":
        //             this.hourStart2 = "00:00";
        //             this.hourEnd2 = moment().format("HH:mm");
        //             this.classChart();
        //             console.log(this.hourStart2, this.hourEnd2);
        //             break;
        //         case "本周":
        //             this.weekStaet2 = moment()
        //                 .startOf("week")
        //                 .format("YYYY-MM-DD");
        //             this.weekEnd2 = moment().format("YYYY-MM-DD");
        //             let weekDays = moment().diff(
        //                 moment().startOf("week"),
        //                 "days"
        //             );
        //             for (let i = 0; i < weekDays + 1; i++) {
        //                 this.classChartData.date.push(
        //                     moment()
        //                         .startOf("week")
        //                         .add(i, "days")
        //                         .format("MM-DD")
        //                 );
        //             }
        //             this.classChart();
        //             // console.log(this.weekStaet2, this.weekEnd2);
        //             break;
        //         case "本月":
        //             this.monthStaet2 = moment()
        //                 .startOf("month")
        //                 .format("YYYY-MM-DD");
        //             this.monthEnd2 = moment().format("YYYY-MM-DD");
        //             let monthDays = moment().diff(
        //                 moment().startOf("month"),
        //                 "days"
        //             );
        //             for (let i = 0; i < monthDays + 1; i++) {
        //                 this.classChartData.date.push(
        //                     moment()
        //                         .startOf("month")
        //                         .add(i, "days")
        //                         .format("MM-DD")
        //                 );
        //             }
        //             this.classChart();
        //             // console.log(this.monthStaet2, this.monthEnd2);

        //             break;
        //         default:
        //             break;
        //     }
        // },

        cusDate1() {
            // console.log(val);
            this.mallChartData.date = [];
            this.mallChartData.value = [];

            let cusDays = moment(this.cuDate[1]).diff(
                moment(this.cuDate[0]),
                "days"
            );
            this.$axios({
                url: "/gym/mallOrder/findMallOrderByDate",
                method: "post",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: qs.stringify({
                    startTime: this.cuDate[0],
                    endTime: this.cuDate[1],
                }),
            }).then((res) => {
                console.log(res.data.data.length);
                for(let i = 0;i<res.data.data.length;i++){
                    this.mallChartData.date.push(res.data.data[i].date);
                    this.mallChartData.value.push(res.data.data[i].count);
                }
                this.mallChart();
            });
            
            // console.log(this.cuDate[0], this.cuDate[1], cusDays);
            console.log(this.mallChartData.date);
            console.log(this.mallChartData.value);
        },

        // cusDate2() {
        //     this.classChartData.date = [];
        //     this.classChartData.value = [];
        //     let cusDays = moment(this.cuDate2[1]).diff(
        //         moment(this.cuDate2[0]),
        //         "days"
        //     );
        //     for (let i = 0; i < cusDays + 1; i++) {
        //         this.classChartData.date.push(
        //             moment(this.cuDate2[0]).add(i, "days").format("MM-DD")
        //         );
        //     }
        //     this.classChart();
        //     console.log(this.cuDate2[0], this.cuDate2[1], cusDays);
        //     console.log(this.classChartData.date);
        // },

        toVipCard() {
            console.log(this.$router);
            this.$router.push({ path: "/memberc/membercard" });
        },

        toRecord() {
            this.$router.push({ path: "/appointmentrecord" });
        },

        mallChart() {
            var chartDom = document.getElementById("mallChart");
            if (chartDom) {
                echarts.dispose(chartDom);
            }
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.mallChartData.date,
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        data: this.mallChartData.value,
                        type: "line",
                        areaStyle: {},
                    },
                ],
            };

            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        // classChart() {
        //     var chartDom = document.getElementById("classChart");
        //     if (chartDom) {
        //         echarts.dispose(chartDom);
        //     }
        //     var myChart = echarts.init(chartDom);

        //     var option;

        //     option = {
        //         xAxis: {
        //             type: "category",
        //             boundaryGap: false,
        //             data: this.classChartData.date,
        //         },
        //         yAxis: {
        //             type: "value",
        //         },
        //         series: [
        //             {
        //                 data: [900, 850, 752, 934, 1290, 1330, 500],
        //                 type: "line",
        //                 areaStyle: {},
        //             },
        //         ],
        //     };

        //     option && myChart.setOption(option);
        //     window.addEventListener("resize", function () {
        //         myChart.resize();
        //     });
        // },
        todayShop() {
            this.$axios({
                url: "/gym/mallOrder/findMallOrderTotalToday",
                method: "post",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: qs.stringify({
                    startTime: moment().format("YYYY-MM-DD"),
                    endTime: moment(moment().format("YYYY-MM-DD"))
                        .add(1, "days")
                        .format("YYYY-MM-DD"),
                }),
            }).then((res) => {
                // console.log(res);
                if (res.data.data.length > 1) {
                    this.$message({
                        showClose: true,
                        message: "啊偶！，今日应收数据请求失败！",
                        type: "error",
                    });
                } else {
                    for (let i = 0; i < res.data.data.length; i++) {
                        this.mTodayShop += res.data.data[i].total;
                        console.log("今日应收（商城）", this.mTodayShop);
                    }
                }
            });
        },
        yesterShop() {
            this.$axios({
                url: "/gym/mallOrder/findMallOrderTotalYesterday",
                method: "post",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: qs.stringify({
                    startTime: moment().format("YYYY-MM-DD"),
                    endTime: moment(moment().format("YYYY-MM-DD"))
                        .add(1, "days")
                        .format("YYYY-MM-DD"),
                }),
            }).then((res) => {
                if (res.data.code != 200) {
                    this.$message({
                        showClose: true,
                        message: "啊偶！，昨日应收数据请求失败！",
                        type: "error",
                    });
                } else {
                    this.mYesterShop = res.data.data[0].count;
                    console.log("昨日应收（商城）", this.mYesterShop);
                }
            });
        },
        todayMember() {
            this.$axios({
                url: "/gym/statistics/vipStatisticsToday",
                method: "post",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: qs.stringify({
                    startTime: moment().format("YYYY-MM-DD"),
                    endTime: moment(moment().format("YYYY-MM-DD"))
                        .add(1, "days")
                        .format("YYYY-MM-DD"),
                }),
            }).then((res) => {
                // console.log(res);
                if (res.data.code != 200) {
                    this.$message({
                        showClose: true,
                        message: "啊偶！，今日新增会员数据请求失败！",
                        type: "error",
                    });
                } else {
                    this.nTodayMember = res.data.data;
                }
            });
        },
        yesterMember() {
            this.$axios({
                url: "/gym/statistics/vipStatisticsYesterday",
                method: "post",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: qs.stringify({
                    startTime: moment().format("YYYY-MM-DD"),
                    endTime: moment(moment().format("YYYY-MM-DD"))
                        .add(1, "days")
                        .format("YYYY-MM-DD"),
                }),
            }).then((res) => {
                // console.log(res);
                if (res.data.code != 200) {
                    this.$message({
                        showClose: true,
                        message: "啊偶！，昨日新增会员数据请求失败！",
                        type: "error",
                    });
                } else {
                    this.nYesterMember = res.data.data;
                }
            });
        },
        cumMemberFn() {
            this.$axios({
                url: "/gym/statistics/vipStatisticsCount",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
            }).then((res) => {
                if (res.data.code != 200) {
                    this.$message({
                        showClose: true,
                        message: "啊偶！，累计会员数据请求失败！",
                        type: "error",
                    });
                } else {
                    this.cumMember = res.data.data;
                }
            });
        },
        claToday() {
            this.$axios({
                url: "/gym/statistics/courseStatistics",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                method: "post",
                data: qs.stringify({
                    startTime: moment().format("YYYY-MM-DD"),
                    endTime: moment(moment().format("YYYY-MM-DD"))
                        .add(1, "days")
                        .format("YYYY-MM-DD"),
                }),
            }).then((res) => {
                // console.log("今日上课", res);
                if (res.data.code != 200) {
                    this.$message({
                        showClose: true,
                        message: "啊偶！，今日上课数据请求失败！",
                        type: "error",
                    });
                } else {
                    this.cToday = res.data.data;
                }
            });
        },
        claYester() {
            this.$axios({
                url: "/gym/statistics/courseStatisticsYesterday",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                method: "post",
                data: qs.stringify({
                    startTime: moment(moment().format("YYYY-MM-DD"))
                        .subtract(1, "days")
                        .format("YYYY-MM-DD"),
                    endTime: moment().format("YYYY-MM-DD"),
                }),
            }).then((res) => {
                // console.log("昨日上课", res);
                if (res.data.code != 200) {
                    this.$message({
                        showClose: true,
                        message: "啊偶！，今日上课数据请求失败！",
                        type: "error",
                    });
                } else {
                    this.cYester = res.data.data;
                }
            });
        },
        newCardFn() {
            this.$axios({
                url: "/gym/statistics/vipCardStatisticsRecent",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                method: "post",
                data: qs.stringify({
                    limit: 3,
                }),
            }).then((res) => {
                if (res.data.code != 200) {
                    this.$message({
                        showClose: true,
                        message: "啊偶！，最新办卡数据请求失败！",
                        type: "error",
                    });
                } else {
                    for (let i = 0; i < res.data.data.length; i++) {
                        res.data.data[i].createTime = moment(
                            res.data.data[i].createTime
                        ).format("MM-DD HH:mm");
                        res.data.data[i].avatar =
                            "https://source.unsplash.com/random/100x100";
                    }
                    this.newCard = res.data.data;
                    console.log("最新办卡", res.data.data);
                }
            });
        },
        groupClassFn() {
            this.$axios({
                url: "/gym/statistics/groupCourseStatisticsToday",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                method: "post",
                data: qs.stringify({
                    startTime: "2021-07-01",
                    endTime: "2021-07-02",
                }),
            }).then((res) => {
                if (res.data.code != 200) {
                    this.$message({
                        showClose: true,
                        message: "啊偶！，今日团课数据请求失败！",
                        type: "error",
                    });
                } else {
                    for (let i = 0; i < res.data.data.length; i++) {
                        res.data.data[i].time =
                            res.data.data[i].courseName +
                            " " +
                            moment(res.data.data[i].time).format("HH:mm");
                    }
                    this.groupClass = res.data.data;
                    console.log("今日团课", res.data.data);
                }
            });
        },
    },
    mounted() {
        this.todayShop();
        this.yesterShop();
        this.todayMember();
        this.yesterMember();
        this.cumMemberFn();
        this.claToday();
        this.claYester();
        this.newCardFn();
        this.groupClassFn();
        this.dateSel("本周");
        // this.dateSel2("本周");
    },
};

//图表
</script>